
<template>
  <div class="weather">
    <div class="selectors">
      <select v-model="selectedProvince" @change="fetchCities" class="select">
        <option v-for="province in provinces" :key="province" :value="province">{{ province.name }}</option>
      </select>
      <select v-model="selectedCity" @change="fetchDistricts" class="select">
        <option v-for="city in cities" :key="city" :value="city">{{ city.name }}</option>
      </select>
      <select v-model="selectedDistrict" @change="fetchWeather" class="select">
        <option v-for="district in districts" :key="district" :value="district">{{ district.name }}</option>
      </select>
    </div>

    <div style="display: flex; width: 100%;">
      <div class="weather-info">
        <el-card class="WeatherCard" shadow="always">
          <div class="card-header">
            <h2 v-if="isSpecialRegion(selectedProvince.name)">{{ selectedProvince.name }}</h2>
            <h2 v-else>{{ selectedDistrict.name }}</h2>
          </div>
          <div class="weather-details" style="display: flex; height: 50%;">
            <div class="temperature-humidity" style="margin-right: 20px;width: 40%;">
              <p>天气：{{ weatherInfo.weather }}</p>
              <p>温度：{{ weatherInfo.temperature }} °C</p>
              <p>湿度：{{ weatherInfo.humidity }}%</p>
            </div>
            <div class="weather-icon" style="width: 50%; display: flex; justify-content: center; align-items: center;">
              <i :class="getWeatherIconClass(weatherInfo.weather)" class="wi"></i>
            </div>
          </div>
          <div style="margin-top: 35px;">
            <p>{{ weatherInfo.winddirection }}风&nbsp; &nbsp;| &nbsp; {{ weatherInfo.windpower }}级</p>
          </div>
        </el-card>
      </div>
      <div class="future-weather-info">
        <div v-for="day in futureWeather" :key="day.date" class="future-weather-day">
          <h3>{{ day.date }}</h3>
          <p>白天天气：{{ day.dayweather }}<i :class="getWeatherIconClass(day.dayweather)" class="wi"></i></p>
          <p>夜间天气：{{ day.nightweather }} <i :class="getWeatherIconClass(day.nightweather)" class="wi"></i></p>
          <p>白天温度：{{ day.daytemp }} °C</p>
          <p>夜间温度：{{ day.nighttemp }} °C</p>
          <p>白天风向：{{ day.daywind }}</p>
          <p>夜间风向：{{ day.nightwind }}</p>
          <p>白天风力：{{ day.daypower }} 级</p>
          <p>夜间风力：{{ day.nightpower }} 级</p>
        </div>
      </div>
    </div>

    <div class="map-chart">
  <div id="main" ref="chart"></div>
  <div id="main1" ref="chart1"></div>
</div>
    <div ref="weatherChart" class="weather-chart"></div>

  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import 'weather-icons/css/weather-icons.css';

export default {
  data() {
    return {
      provinces: [],
      cities: [],
      districts: [],
      selectedProvince: {},
      selectedCity: {},
      selectedDistrict: {},
      weatherInfo: {
        weather: '',
        temperature: '',
        humidity: '',
        winddirection: '',
        windpower: '',
      },
      futureWeather: [],
      data: null,
      myChart1:null,
    };
  },
  mounted() {
    this.fetchProvinces();
    this.getMap(this.$refs.chart,100000);
  },
  methods: {
    async fetchProvinces() {
      const key = '3d6a7f5c57d9427752c77bfd64a1b14d';
      try {
        const response = await axios.get(`https://restapi.amap.com/v3/config/district?keywords=中国&subdistrict=1&key=${key}`);
        this.provinces = response.data.districts[0].districts;
        this.selectedProvince = this.provinces[0];
        this.fetchCities();
      } catch (error) {
        console.error(error);
      }
    },
    async fetchCities() {
      const key = '3d6a7f5c57d9427752c77bfd64a1b14d';
      try {

        if (this.isSpecialRegion(this.selectedProvince.name)) {
          this.selectedCity = '';
          this.myChart1.dispose();
        }else{
          const response = await axios.get(`https://restapi.amap.com/v3/config/district?keywords=${this.selectedProvince.name}&subdistrict=1&key=${key}`);
          this.cities = response.data.districts[0].districts;
          this.getMap1(this.$refs.chart1,response.data.districts[0].adcode);
          this.selectedCity = this.cities[0];

          const r = await axios.get(`https://restapi.amap.com/v3/geocode/geo?address=四川省成都市&output=JSON&key=${key}`);
          console.log(r.data)

        }
        this.fetchDistricts();
      } catch (error) {
        console.error(error);
      }
    },
    async fetchDistricts() {
      const key = '3d6a7f5c57d9427752c77bfd64a1b14d';
      try {
        if (this.isSpecialRegion(this.selectedProvince.name)) {
          this.selectedDistrict = '';
        }else{
          const response = await axios.get(`https://restapi.amap.com/v3/config/district?keywords=${this.selectedCity.name}&subdistrict=1&key=${key}`);
          this.districts = response.data.districts[0].districts;
          this.selectedDistrict = this.districts[0];
          console.log(response.data)
        }
        this.fetchWeather();
      } catch (error) {
        console.error(error);
      }
    },
    async fetchWeather() {
      const key = '3d6a7f5c57d9427752c77bfd64a1b14d';
      let district = this.selectedDistrict.name;

      if (this.isSpecialRegion(this.selectedProvince.name)) {
        district = this.selectedProvince.name;
      }

      try {
        const response0 = await axios.get(`https://restapi.amap.com/v3/geocode/geo?address=${district}&output=json&key=${key}`);
        const citycode = response0.data.geocodes[0].adcode;
        const response = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${citycode}`);
        const weatherData = response.data.lives[0];
        this.weatherInfo = {
          weather: weatherData.weather,
          temperature: weatherData.temperature,
          humidity: weatherData.humidity,
          winddirection: weatherData.winddirection,
          windpower: weatherData.windpower,
        };

        const futureResponse = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${citycode}&extensions=all`);
        this.futureWeather = futureResponse.data.forecasts[0].casts;

        this.renderChart();
      } catch (error) {
        console.error(error);
      }
    },
    isSpecialRegion(name) {
      // 判断是否是台湾、香港或澳门
      return name === '台湾省' || name === '香港特别行政区' || name === '澳门特别行政区';
    },
    getWeatherIconClass(weatherCondition) {
      const weatherIconClasses = {
        '晴': 'wi-day-sunny',
        '多云': 'wi-cloudy',
        '雨': 'wi-rain',
        '小雨': 'wi-rain',
        '中雨': 'wi-rain',
        '大雨': 'wi-rain-wind',
        '雷阵雨': 'wi-thunderstorm',
        '雷阵雨并伴有冰雹': 'wi-hail',
        '暴雨': 'wi-rain',
        '阴': 'wi-cloud',
        '雪': 'wi-snow',
        '小雪': 'wi-snow',
        '中雪': 'wi-snow',
        '大雪': 'wi-snow',
        '雨夹雪': 'wi-rain-mix',
        '雾': 'wi-fog',
        '霾': 'wi-smog',
        '沙尘暴': 'wi-sandstorm',
        '浮尘': 'wi-dust',
        '强沙尘暴': 'wi-sandstorm',
        '大暴雨': 'wi-rain-wind',
        '特大暴雨': 'wi-rain-wind',
        '冰雹': 'wi-hail',
        '霜冻': 'wi-snowflake-cold',
        '阵雪': 'wi-snow',
        '冻雨': 'wi-rain-mix',
        '大风': 'wi-strong-wind',
        '轻风': 'wi-day-windy',
        '和风': 'wi-day-windy',
        '清风': 'wi-day-windy',
        '微风': 'wi-day-light-wind',
        '东风': 'wi-wind-direction',
        '东南风': 'wi-wind-direction',
        '南风': 'wi-wind-direction',
        '西南风': 'wi-wind-direction',
        '西风': 'wi-wind-direction',
        '西北风': 'wi-wind-direction',
        '北风': 'wi-wind-direction',
        '东北风': 'wi-wind-direction',
        '旋转风': 'wi-small-craft-advisory',
        '未知': 'wi-na',
      };
      if(!weatherIconClasses[weatherCondition]){
        if (weatherCondition.includes('雨')) {
          return 'wi-rain';
        } else if (weatherCondition.includes('雷')) {
          return 'wi-thunderstorm';
        } else if (weatherCondition.includes('雪')) {
          return 'wi-snow';
        } else if (weatherCondition.includes('风')) {
          return 'wi-windy';
        } else if (weatherCondition.includes('云')) {
          return 'wi-cloudy';
        }
      }
      return weatherIconClasses[weatherCondition] || weatherIconClasses['未知'];
    },
    renderChart() {
      const chart = echarts.init(this.$refs.weatherChart);
      const dates = this.futureWeather.map(day => day.date);
      const dayTemps = this.futureWeather.map(day => parseInt(day.daytemp, 10));
      const nightTemps = this.futureWeather.map(day => parseInt(day.nighttemp, 10));

      chart.setOption({
        title: {
          text: '未来4天白天与夜间温度折线图',
          left: 'center',
          textStyle: {
            fontSize: 20, // 调整标题文字大小
          },
        },
        legend: { // 添加legend组件
          data: ['白天温度', '夜间温度'],
          right: 'center',
          top: '10%',
          textStyle: {
            color: '#333'
          },
          itemWidth: 10, // 设置图例标志的宽度
          itemHeight: 10, // 设置图例标志的高度
          formatter: function(name) { // 自定义图例文字格式，这里可以设置颜色
            if (name === '白天温度') {
              return  name;
            } else if (name === '夜间温度') {
              return  name;
            }
          },
          fontSize: 16,
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            color: '#333',
            fontSize: 18,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            color: '#333',
            formatter: '{value} °C', // 添加单位°C
            fontSize: 18,
          },
        },
        series: [
          {
            name: '白天温度',
            data: dayTemps,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#FF6347',
            },
            itemStyle: {
              color: '#FF6347',
            },
            areaStyle: {
              color: 'rgba(255, 99, 71, 0.2)',
            },
            label: { // 添加label配置
              show: true, // 显示标签
              position: 'top', // 标签位置，可选值有'top'、'bottom'、'left'、'right'等
              formatter: '{c}°C', // 数据标签格式化器，'{c}'表示数据值
              fontSize: 18,
            },
          },
          {
            name: '夜间温度',
            data: nightTemps,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#3398DB',
            },
            itemStyle: {
              color: '#3398DB',
            },
            areaStyle: {
              color: 'rgba(51, 152, 219, 0.2)',
            },
            label: { // 添加label配置
              show: true, // 显示标签
              position: 'top', // 标签位置，可选值有'top'、'bottom'、'left'、'right'等
              formatter: '{c}°C', // 数据标签格式化器，'{c}'表示数据值
              fontSize: 18,
            },
          },
        ],
      });
    },
    async getMap(ref,code) {
      const response = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`);
      let myData = response.data;
      var myChart = echarts.getInstanceByDom(ref);
      if (!myChart) {
        myChart = echarts.init(ref);
        echarts.registerMap("china", myData);
      }

      let option = {
        geo3D: {
          map: "china",
          roam: true,
          tooltip: {
            show: true,
            trigger: "item",
            formatter: (params) => {
              return params.name;
            },
          },
          itemStyle: {
            color: "#091632",
            opacity: 1,
            borderWidth: 1,
            borderColor: "#9adcfa",
            shadowColor: '#09184F',
          },
          label: {
            show: false,
            textStyle: {
              color: "#fff",
              fontSize: 10,
              opacity: 1,
            },
            formatter: (params) => {
              return ` ${params.name} `;
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize:10,
              textStyle: {
                color: "#fff",
                fontSize: 3,
              },
            },
          },
          shading: "lambert",
          light: {
            main: {
              color: "#fff",
              intensity: 1.2,
              shadow: true,
              alpha: 60,
              beta: 10,
            },
            ambient: {
              intensity: 0.6,
            },
          },
          viewControl: {
            projection: "perspective",
            autoRotate: false,
            autoRotateDirection: "cw",
            autoRotateSpeed: 10,
            autoRotateAfterStill: 3,
            damping: 0,
            rotateSensitivity: 10,
            zoomSensitivity: 10,
            panSensitivity: 10,
            panMouseButton: "left",
            rotateMouseButton: "left",
            distance: 100,
            minDistance: 40,
            maxDistance: 400,
            alpha: 40,
            beta: 15,
            minAlpha: 20,
            maxAlpha: 80,
            minBeta: -180,
            maxBeta: 180,
            center: [0, 0, 0],
            animation: true,
            animationDurationUpdate: 1000,
            animationEasingUpdate: "cubicInOut",
          },
          silent: false,
          regionHeight: 10,
          zlevel: 1,
        },
        series: [
          {
            regionHeight: 11,
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            data: [{ name: '乌鲁木齐', value: [87.618000,43.824599] },],
            symbolSize: 14,
            label: {
              show: true,
              formatter: '{b}',
              position: 'right',
              color: '#fff'
            },
            itemStyle: {
              color: 'red',
              opacity: 1,
            },
            zlevel: 5,
          },
          {
            regionHeight: 10,
            type: 'map3D',
            map: 'china',
            label: {
              show: false,
            },
            itemStyle: {
              color: "#f5f1ba",
              opacity: 0,
              borderWidth: 1,
              borderColor: "#f5f1ba",
            },
            zlevel: 2,
            viewControl: {
              projection: "perspective",
              autoRotate: false,
              autoRotateDirection: "cw",
              autoRotateSpeed: 10,
              autoRotateAfterStill: 3,
              damping: 0,
              rotateSensitivity: 10,
              zoomSensitivity: 10,
              panSensitivity: 10,
              panMouseButton: "left",
              rotateMouseButton: "left",
              distance: 100,
              minDistance: 40,
              maxDistance: 200,
              alpha: 40,
              beta: 15,
              minAlpha: 20,
              maxAlpha: 80,
              minBeta: -180,
              maxBeta: 180,
              center: [0, 0, 0],
              animation: true,
              animationDurationUpdate: 1000,
              animationEasingUpdate: "cubicInOut",
            },
            silent: false,
          }
        ]
      };

      myChart.setOption(option);

      // 修正事件绑定，确保 params 被传递到处理函数中
      myChart.on('click', async (params)=> {
        if (params.componentType === 'series') {
          console.log(params.name)
          let selectedProvince = this.provinces.findIndex(province => province.name.includes(params.name))+1;
          if (selectedProvince) {
            // 更新selectedProvince
            this.selectedProvince = this.provinces[selectedProvince-1];
            // 根据新的selectedProvince重新加载城市列表和区县列表
            this.fetchCities();
          }
        }
      });



    },
    async getMap1(ref,code) {
      const response = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`);
      let myData = response.data;
      if(this.myChart1){
        this.myChart1.dispose();
      }
      this.myChart1 = echarts.init(ref);
      echarts.registerMap("province", myData);

      let option = {
        geo3D: {
          map: "province",
          roam: true,
          tooltip: {
            show: true,
            trigger: "item",
            formatter: (params) => {
              return params.name;
            },
          },
          itemStyle: {
            color: "#102656",
            opacity: 1,
            borderWidth: 1,
            borderColor: "#9adcfa",
            shadowColor: '#09184F',
          },
          label: {
            show: false,
            textStyle: {
              color: "#00ff7f",
              fontSize: 10,
              opacity: 1,
            },
            formatter: (params) => {
              return ` ${params.name} `;
            },
          },
          emphasis: {
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 3,
              },
            },
          },
          shading: "lambert",
          light: {
            main: {
              color: "#fff",
              intensity: 1.2,
              shadow: true,
              alpha: 60,
              beta: 10,
            },
            ambient: {
              intensity: 0.6,
            },
          },
          viewControl: {
            projection: "perspective",
            autoRotate: false,
            autoRotateDirection: "cw",
            autoRotateSpeed: 10,
            autoRotateAfterStill: 3,
            damping: 0,
            rotateSensitivity: 10,
            zoomSensitivity: 10,
            panSensitivity: 10,
            panMouseButton: "left",
            rotateMouseButton: "left",
            distance: 150,
            minDistance: 40,
            maxDistance: 200,
            alpha: 40,
            beta: 15,
            minAlpha: 20,
            maxAlpha: 80,
            minBeta: -180,
            maxBeta: 180,
            center: [0, 0, 0],
            animation: true,
            animationDurationUpdate: 1000,
            animationEasingUpdate: "cubicInOut",
          },
          silent: false,
          regionHeight: 10,
          zlevel: 1,
        },
        series: [
          {
            regionHeight: 11,
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            data: [
            ],
            symbolSize: 12,
            label: {
              show: true,
              formatter: '{b}',
              position: 'right',
              color: '#fff'
            },
            itemStyle: {
              color: 'red',
              opacity: 1,
            },
            zlevel: 5,
          },
          {
            regionHeight: 10,
            type: 'map3D',
            map: 'province',
            label: {
              show: false,
            },
            itemStyle: {
              color: "#4189f2",
              opacity: 0,
              borderWidth: 1,
              borderColor: "#64a0f6",
            },
            zlevel: 2,
            viewControl: {
              projection: "perspective",
              autoRotate: false,
              autoRotateDirection: "cw",
              autoRotateSpeed: 10,
              autoRotateAfterStill: 3,
              damping: 0,
              rotateSensitivity: 10,
              zoomSensitivity: 10,
              panSensitivity: 10,
              panMouseButton: "left",
              rotateMouseButton: "left",
              distance: 150,
              minDistance: 40,
              maxDistance: 400,
              alpha: 40,
              beta: 15,
              minAlpha: -720,
              maxAlpha: 720,
              minBeta: -720,
              maxBeta: 720,
              center: [0, 0, 0],
              animation: true,
              animationDurationUpdate: 1000,
              animationEasingUpdate: "cubicInOut",
            },
            silent: false,
          }
        ]
      };

      this.myChart1.setOption(option);

      this.myChart1.on('click', async (params)=> {
        console.log(params.name)
        if (params.componentType === 'series') {
          if(this.selectedProvince.name.endsWith("市")){
            let selectedDistrict = this.districts.findIndex(district => district.name.includes(params.name))+1;
            if(selectedDistrict){
              this.selectedDistrict = this.districts[selectedDistrict-1];
              this.futureWeather();
            }
          }else {
            let selectedCity = this.cities.findIndex(city => city.name.includes(params.name))+1;
            if (selectedCity) {
              // 更新selectedCity
              this.selectedCity = this.cities[selectedCity-1];
              // 根据新的selectedCity重新加载城市列表和区县列表
              this.fetchDistricts();
            }
          }
        }
      });

    },


  },
};
</script>

<style scoped>
.weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Arial, sans-serif';
  color: #333;
  padding: 20px;
  background: linear-gradient(135deg, #fdfbfb, #f0f0f0);
  background-color: #fff;
  border-radius: 10px;
  margin: auto 20px;
  box-shadow: 0 4px 8px rgba(141, 141, 141, 0.1), 0 -4px 8px rgba(115, 115, 115, 0.1), 4px 0 8px rgba(104, 104, 104, 0.1), -4px 0 8px rgba(104, 104, 104, 0.1);
}
.selectors {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  width: 50%;
}
.select {
  padding: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(157, 157, 157, 0.1), 0 -4px 8px rgba(136, 136, 136, 0.1), 4px 0 8px rgba(136, 136, 136, 0.1), -4px 0 8px rgba(125, 125, 125, 0.1);
  font-size: 16px;
  color: #333;
  width: 30%;
  font-size: 18px;
  font-weight: bold;
  background: #fff;
  border:1px solid  #eee ;
}
.weather-info {
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 20px;
  width: 435px;
  height: 368px;
  box-shadow: 0 4px 8px rgba(141, 141, 141, 0.1), 0 -4px 8px rgba(115, 115, 115, 0.1), 4px 0 8px rgba(104, 104, 104, 0.1), -4px 0 8px rgba(104, 104, 104, 0.1);

}
.weather-info .el-card{
  height: 100%;
  box-shadow: 0 4px 8px rgba(141, 141, 141, 0.1), 0 -4px 8px rgba(115, 115, 115, 0.1), 4px 0 8px rgba(104, 104, 104, 0.1), -4px 0 8px rgba(104, 104, 104, 0.1);
}

.weather-info h2 {
  font-size: 30px !important;
  margin-bottom: 10px!important;
  padding: 23px 0 30px!important;
}
.weather-info p {
  font-size: 18px;
  margin: 10px 0;
}
.future-weather-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  border:1px solid  #eee ;
  box-shadow: 0 4px 8px rgba(157, 157, 157, 0.1), 0 -4px 8px rgba(136, 136, 136, 0.1), 4px 0 8px rgba(136, 136, 136, 0.1), -4px 0 8px rgba(125, 125, 125, 0.1);
  margin: 20px 20px;
  width: 90%;
  height: 368px;
}
.future-weather-day {
  margin-right: 10px;
  margin-left: 10px;
  padding: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  flex: 1 1 200px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(157, 157, 157, 0.1), 0 -4px 8px rgba(136, 136, 136, 0.1), 4px 0 8px rgba(136, 136, 136, 0.1), -4px 0 8px rgba(125, 125, 125, 0.1);

}
.future-weather-day h3 {
  font-size: 18px;
  margin-bottom: 5px;
}
.future-weather-day p {
  font-size: 18px;
  margin: 5px 0;
}

.weather-chart {
  width: 98%;
  height: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(157, 157, 157, 0.1), 0 -4px 8px rgba(136, 136, 136, 0.1), 4px 0 8px rgba(136, 136, 136, 0.1), -4px 0 8px rgba(125, 125, 125, 0.1);
  padding: 40px;
  padding-right: 0px;
  border:1px solid  #eee ;
}

.WeatherCard .weather-icon .wi{
  font-size: 90px;
  font-weight: bold;
  margin-bottom: 25px;
}

.map-chart {
  width: 100%;
  height: 70vh; /* 设置统一高度 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 子项左右分布 */
  align-items: left; /* 子项垂直居中 */
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(157, 157, 157, 0.1), 0 -4px 8px rgba(136, 136, 136, 0.1), 4px 0 8px rgba(136, 136, 136, 0.1), -4px 0 8px rgba(125, 125, 125, 0.1);
  border: 1px solid #eee;
  margin-bottom: 20px;
  padding: 0 2%; /* 两侧留白间距 */
}

.map-chart #main {
  width: 50%; /* 左侧占40%宽度 */
  height: 100%; /* 高度占满父容器 */
  display: flex; /* 内容居中 */
  justify-content: left; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* background-color: #f9f9f9;  可选：设置背景色 */
}

.map-chart #main1 {
  width: 40%; /* 右侧占40%宽度 */
  height: 100%; /* 高度占满父容器 */
  display: flex; /* 内容居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* .map-chart{
  width: 98%;
  height: auto;
  display: flex;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(157, 157, 157, 0.1), 0 -4px 8px rgba(136, 136, 136, 0.1), 4px 0 8px rgba(136, 136, 136, 0.1), -4px 0 8px rgba(125, 125, 125, 0.1);
  border:1px solid  #eee ;
  margin-bottom: 20px;
} */

</style>